<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect, toRefs } from 'vue'
import iconBofang from '../../assets/img/播放.png'
import iconZanting from '../../assets/img/暂停1.png'
import { formatTime, addHours } from "../../utils/cTime.js";
import { smInfo, chartInfo } from '../../stores/chun.js'

const { dateShumo } = toRefs(smInfo)

onMounted(() => {
    nextTick(() => {

        // setTimeout(() => {
        //     barWidth.value = document.getElementById('step_main').offsetWidth
        //     console.log('barWidth.value :>> ', document.getElementById('step_main').offsetWidth);


        //     // 监听屏幕变化
            window.addEventListener('resize', () => {
                barWidth.value = document.getElementById('step_main').offsetWidth
            })

        //     timeIdx.value = new Date().getHours() - 8
        //     if (timeIdx.value < 0) {
        //         timeIdx.value = 0
        //     }

        //     activeWidth.value = timeIdx.value / 72 * barWidth.value
        // }, 800)

        getBarWidth()
    })
})

// 反复尝试获取元素宽度
const getBarWidth = () => {
    if (document.getElementById('step_main')&&document.getElementById('step_main').offsetWidth!=0) {
        barWidth.value = document.getElementById('step_main').offsetWidth
        timeIdx.value = new Date().getHours() - 8+1 //未来的那个小时
        console.log('timeIdx.value :>> ', timeIdx.value);
        
        if (timeIdx.value < 0) {
            timeIdx.value = 0
        }

        activeWidth.value = timeIdx.value / 72 * barWidth.value
    } else {
        setTimeout(() => {
            getBarWidth()
        }, 100)
    }
}

const date = ref(formatTime(new Date(), 'yyyy-MM-dd'))
const state = reactive({
    time: 0,
    duration: 0,
    isPlay: false,
    timer: null,
})
const isPlay = ref(false)
const activeWidth = ref(0)
const timeIdx = ref(0)


const tipDate = ref()
let barWidth = ref(0)
const day3 = ref([
])

for (let i = 0; i < 4; i++) {
    let width = 0
    if (i === 0) {
        width = 16 / 72
    } else if (i === 1) {
        width = 24 / 72
    } else if (i === 2) {
        width = 24 / 72
    } else {
        width = 8 / 72
    }
    day3.value.push({
        date: formatTime(addHours(date.value.split(' ')[0] + ' 00:00', i * 24)).split(' ')[0],
        width
    })

}

const handleBar = (e) => {
    if (!e.target.id.includes('step_main_bar')) return
    let { layerX } = e

    activeWidth.value = layerX
    setTimeout(() => {
        timeIdx.value = Math.floor(layerX / barWidth.value * 72)
        if (timeIdx.value === 72) {
            timeIdx.value = 71
        }
    }, 200)

}

watch(timeIdx, () => {

    if (day3.value.length == 0) return;

    tipDate.value = formatTime(addHours(day3.value[0].date + ' 08:00', timeIdx.value))
    let pyDate = formatTime(addHours(day3.value[0].date + ' 08:00', timeIdx.value - 8))
    let hour = tipDate.value.split(' ')[1].split(':')[0]
    let month = tipDate.value.split('-')[1]
    let day = tipDate.value.split('-')[2].split(' ')[0]
    let year = tipDate.value.split('-')[0]

    let pyHour = pyDate.split(' ')[1].split(':')[0]
    let pyMonth = pyDate.split('-')[1]
    let pyDay = pyDate.split('-')[2].split(' ')[0]
    let pyYear = pyDate.split('-')[0]

    tipDate.value = `${month}月${day}日 ${hour}时`
    dateShumo.value = pyYear + pyMonth + pyDay + pyHour
}, {
    immediate: true,
    deep: true
})

let timer = null
watch(isPlay, () => {
    if (isPlay.value) {
        timer = setInterval(() => {
            if (timeIdx.value >= 71) {
                clearInterval(timer)
                activeWidth.value = 0
                isPlay.value = false
                setTimeout(() => {
                    timeIdx.value = 0
                }, 200)
                return
            }
            activeWidth.value = (timeIdx.value + 1) / 72 * barWidth.value
            setTimeout(() => {
                timeIdx.value++
            }, 200)
        }, 1000)
    } else {
        clearInterval(timer)
    }
})

// watch(chartInfo,()=>{
//     if(chartInfo.isChart){
//         isPlay.value = false
//     }
// })

</script>

<template>
    <div class="time_step">
        <div id="step_bf">
            <img :src="isPlay ? iconZanting : iconBofang" alt="" @click="isPlay = !isPlay">
        </div>
        <div id="step_main" @click="handleBar">

            <div id="step_main_bar"></div>
            <div id="step_main_bar_active" :style="{ width: activeWidth + 'px' }"></div>
            <div id="step_main_info">
                <div class="step_main_info_item" v-for="day in day3" :style="{ flex: day.width }">
                    <span>{{ day.date }}</span>
                </div>
            </div>

            <div id="step_main_tips" :style="{ left: (activeWidth - 50) + 'px' }">
                <span>{{ tipDate }}</span>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.time_step {
    position: fixed;
    bottom: 0px;
    left: 15px;
    z-index: 1000;
    display: flex;
    width: calc(100% - 365px);

    #step_bf {
        width: 30px;
        height: 30px;
        background-color: #fff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin-top: -10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border: 1px solid #b0afaf;


        img {
            width: 25px;
            height: 25px;
        }
    }

    #step_main {
        flex: 1;
        height: 40px;
        border-radius: 10px;
        margin-left: 10px;
        cursor: pointer;

        #step_main_bar {
            height: 10px;
            background-color: #b0afaf;
            opacity: 0.8;
            border-radius: 5px;
            // box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            // 白色阴影
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            // 黑色边框
            border: 1px solid #b0afaf;
        }



        #step_main_bar_active {
            height: 10px;
            background-color: #3466C5;
            opacity: 0.8;
            border-radius: 5px;
            position: absolute;
            top: 0;
            left: 0;
            transition: width 0.2s;
        }

        #step_main_bar_c {
            width: 100%;
            height: 10px;
            border-radius: 5px;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
        }

        #step_main_info {
            display: flex;
            width: 100%;

            .step_main_info_item {
                // flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    font-size: 14px;
                    font-family: 'aliph500';
                    color: #000;
                }

                user-select: none;
            }

            // 第二个元素左右边框
            .step_main_info_item:nth-child(2) {
                border-left: 1px solid #787777c7;
                border-right: 1px solid #787777c7;
            }

            .step_main_info_item:nth-child(3) {
                border-right: 1px solid #787777c7;
            }
        }

        #step_main_tips {
            position: absolute;
            top: -45px;
            // left: -50px;
            width: 120px;
            height: 30px;
            background-color: #fff;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0.8;
            transition: left 0.2s;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            border: 1px solid #b0afaf;

            span {
                font-size: 14px;
                color: #000;
                font-family: 'aliph500';
            }

            &::before {
                content: '';
                position: absolute;
                top: 100%;
                width: 0;
                height: 0;
                border: 10px solid transparent;
                border-top-color: #fff;
                transform: translateX(-50%);
            }
        }
    }
}
</style>